<script setup lang="ts">
import {loginForService} from '@/api/service/common.ts'
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import router from '@/router';
const userModel = reactive({
  username:'',
  password:''
})

function login() {
	loginForService(userModel).then(resp => {
		if(resp.status == 200) {
			console.log(resp);
			router.push("/adminsys");
		} else {
			ElMessage.error("请求错误");
		}
	}) 
}

</script>

<template>
    <div class="Div">
			<div class="lg">
				<div class="ig">
					<img src="../../public/touxiang.jpg">
				</div>
				<div class="Login">
					<!-- <form class="login">
						<input type="text" v-model="username" placeholder="Usename"/><br />
						<input type="password" v-model="password" placeholder="Password"/><br/>
						<input type="checkbox"/>记住密码<a href="#" class="A">忘记密码!</a><br/>
						<div style="color: red;" class="ti">
							<p v-if="loginFailed" >{{ loginFailed }}</p>
						</div>
						<input type="button" value="登录" @click="login"/>
						<RouterLink to="/register"><input type="button" value="注册"></RouterLink>
					</form>	 -->
					<el-row class="login">
                        <el-col >
                        <el-form :model="userModel" label-width="120px" style="background-color: aliceblue;padding:60px 20px 20px 20px;" size="large" >
                        <el-form-item label="用户名">
                            <el-input v-model="userModel.username" placeholder="请输入用户名" />
                        </el-form-item>
                        
                        <el-form-item label="密码">
                            <el-input v-model="userModel.password" size="large" placeholder="请输入密码" type="password"/>
                        </el-form-item>
                        
                        <el-form-item>
                        <el-col :span="11" :offset="6">
                        <el-button type="primary" @click="login()">登 录</el-button>
                        </el-col>
                        </el-form-item>
                    </el-form>
                    </el-col>
                </el-row>
				</div>
			</div>
		</div>
</template>
<style scoped>
*{margin: 0;padding: 0;}
			.Div{
				width: 100%;
				height: 100%;
				background: url(../../public/bg1.png);
				background-size: 100% 100%;
				position: fixed;
				top: 0;
			}
			.ig{
				width: 100px;
				height: 100px;
				position: relative;
				left: 40%;
				top: 50px;
				z-index: 9;
				
			}
			.ig img{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				cursor: pointer;
				box-shadow: 0 0 10px rgba(0,0,0,0.8);
				transition: transform 0.5s ease;
			}
			.ig:hover img{transform:translateY(-10px);}
			.lg{
				width: 40%;
				margin:0 auto;
				margin-top: 120px;
			}
			.Login{
				width: 100%;
				height: 300px;
				border-radius: 10px;
				background: mediumpurple;
				opacity: 0.8;
				position: relative;
				z-index: 1;
			}
			.login{
				width: 60%;
				margin: 0 auto;
				position: relative;
				top: 80px;
			}
			.login .ti{
				width: 100%;
				height: 10px;
				text-align: center;
			}
			input[type=text],input[type=password]{
				width:50%;
				height: 20px;
				border-radius: 5px;
				margin-left: 23%;
				margin-top: 20px;
			}
			input[type=checkbox]{
				margin-top: 5px;
				margin-left: 23%;
			}
			.login .A{
				margin-left: 8%;
				margin-top: 5px;

			}
			input[type=button]{
				width:25%;
				height: 40px;
				border-radius: 5px;
				margin-left: 15%;
				margin-top: 20px;
				cursor: pointer;
				background-color: #4D92D9;
				transition: transform 0.5s ease;
			}
			input[type=button]:hover{
				transform: scale(1.02);
			}
</style>


